<template>
  <div>
    <client-only>
      <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.0/skins/default/aliplayer-min.css"/>
      <script type="text/javascript" charset="utf-8"
              src="https://g.alicdn.com/de/prismplayer/2.8.0/aliplayer-min.js"></script>
      <!-- 请下载之后使用 -->
      <!--    <script type="text/javascript" charset="utf-8" src="/static/js/aliplayercomponents-1.0.5.min.js"></script>-->

      <div class="v-wrap">
        <!--left-->
        <div class="l-con">
          <!--标题-->
          <div id="viewbox_report" class="video-info">
            <h1 :title="section.title" class="video-title">
              <span class="tit">{{section.title}}</span>
            </h1>
            <div class="video-data"><span title="总播放数759471" class="view">75.9万播放&nbsp;·&nbsp;</span><span
              title="历史累计弹幕数44413" class="mr5">总弹幕数4.4万</span><span>{{section.gmtCreate}}</span>
            </div>
          </div>
          <!--播放器-->
          <div class="prism-player" id="player-con" style="height: 400px;"></div>

          <!-- /评论 html不支持驼峰 -->
          <y-comment-block :fromData="fromCommentData"/>

        </div>
        <!--right-->

        <div class="r-con">
          <!--讲师信息-->
          <div id="v_upinfo" class="up-info">
            <div class="user-face">
              <a href="###" target="_blank" class="u-face__avatar avatar-loaded">
                <div class="bili-avatar" style="width: 48px;height:48px;transform: translate(0px, 0px);">
                  <img v-if="teacher.avatar" class="bili-avatar-img" alt="" :src="teacher.avatar">
                  <span
                    class="bili-avatar-icon bili-avatar-right-icon  bili-avatar-icon--personal bili-avatar-size-48"></span>
                </div>
              </a></div>
            <div class="up-info_right">
              <div class="name" style="line-height:20px;height:20px;"><!---->
                <a href="###" target="_blank" class="username " style="color:#FB7299;">
                  {{teacher.name}}
                  <span class="mask"></span></a>
                <a href="$$" target="_blank" class="message"><i class="el-icon-message"></i>
                  发消息
                </a></div>
              <div title=" 微博/网易/Q音:xxxx  交流群2：xxxxx 商务、作品合作邮箱:xxxxxxx@163.com " class="desc">
                微博/网易/Q音:xxxx 交流群2：xxxxx 商务、作品合作邮箱:xxxxxxx@163.com
              </div>
            </div>
          </div>
          <!--  视频列表-->
          <div id="multi_page" class="multi-page report-wrap-module report-scroll-module">
            <div class="head-con">
              <div class="head-left"><h3>视频选集</h3><span class="cur-page">(139/307)</span>
                <div class="range-box"><i class="van-icon-general_viewlist"></i><!----></div>
              </div>

            </div>
            <div class="cur-list">
              <ul class="list-box">

                <li v-for="(item,index) in videoList" :key="index" :class="item.id===sectionId? 'on':''">
                  <a @click.stop="toPlayer(item.videoSourceId)" class="router-link-active" :title="item.title">
                    <div class="clickitem">
                      <div class="link-content"><img src="//s1.hdslb.com/bfs/static/jinkela/video/asserts/playing.gif">
                        <span class="page-num">P{{index+1}}</span>
                        <span class="part">{{item.title}}</span>
                      </div>
                      <div class="duration">{{item.videoLength}}</div>
                    </div>
                  </a>
                </li>
              </ul><!----></div>
          </div>
        </div>
      </div>

      <script type="text/template" id="endPreviewTemplate">
        <div class="vip_limit_content">
          <div class="vip_limit_wrap">
            <p class="title">Purchase Full Version</p>
            <div class="vip_limit_button_box">
              <a class="vip_limit_btn">Become VIP</a>
            </div>
            <div class="vip_limit_close"><span class="vip_limit_close_btn">x</span></div>
          </div>
        </div>
      </script>
    </client-only>
  </div>

</template>

<script>

  import '~/assets/css/player.css'

  import vod from "@/api/vod"
  import comment from '@/api/comment'
  import course from '@/api/course'
  import commonUtil from "@/utils/commonUtil";
  import YCommentBlock from '@/components/commentBlock'

  export default {

    /*asyncData({params, error}) {
      return vod.getPlayAuth(params.vid).then(response => {
        console.log(params.vid)
        console.log(response);
        //   require('~/assets/js/aliplayer-min.js')
        //已经拿到playAuth
        return {
          playAuth: response
          // chapterList: response.data.data.chapterList
        }
      })
    },*/
    // layout: 'video',
    data() {
      return {
        fromCommentData: {
          page: 1,
          limit: 4,
          targetType: 2,//业务类型 1course 2vod 3article
          targetId: this.$route.params.sid,
          teacherId: ""
        },
        sectionId: '',
        courseId: '',
        vid: this.$route.params.vid,
        teacher: {},
        videoList: [],
        section: {},
        playAuth: ""
      }
    },
    mounted() {
      this.getSectionInfo()
      this.getPlayAuth().then(() => {
        this.createAliplayer()
      }).catch(error => {
       /* console.log(error)
        console.log(3333)
        this.createAliplayer()*/
      })
    },
    created() {
      //this.section = this.videoList.find(item => item.id === this.sectionId)
      // this.section.isCurrent = true
    },
    components: {
      YCommentBlock
    },
    methods: {
      createAliplayer() {
        return new Aliplayer({
            "id": "player-con",
            "vid": this.vid,
            "playauth": this.playAuth,
            "qualitySort": "asc",
            "format": "mp4",
            "mediaType": "video",
            "width": "100%",
            "height": "500px",
            "autoplay": false,
            "isLive": false,
            "rePlay": false,
            "playsinline": true,
            "preload": false,
            "language": "zh-cn",
            "controlBarVisibility": "hover",
            "useH5Prism": true,
            /* components: [{
               name: 'PreviewVodComponent',
               type: AliPlayerComponent.PreviewVodComponent,
               /!**
                * The preview component has these parameters: previewDuration, previewEndHtml, and previewBarHtml.
                * previewDuration: The length of the preview, in seconds. If you want to disable preview, set this parameter to 0. Make sure that it is set to 0 after the audience purchases the video or becomes a VIP.
                * previewEndHtml: The string shown in the middle of the player after the preview is over. The default is null.
                * previewBarHtml: The string shown in the lower-left corner of the player after the preview is over. The default is null.
                * Note 1: The previewEndHtml and previewBarHtml parameters can be set in the same way as the previewEndHtml parameter in the sample code. You can set the type of a script tag to text/x-template, and then set the previewEndHtml parameter to the ID of the script tag. You can also pass strings to both parameters in the same way as the previewBarHtml parameter in the sample code.
                * Note 2: You can also set a DOM string to the previewEndHtml and previewBarHtml parameters. We recommend that you use ES6 template strings.
                *!/
               args: [60, '#endPreviewTemplate', `<a href="https://www.aliyun.com/product/vod" class="vip-join">开通会员</a> 观看完整视频`]
             }]*/
          }, function (player) {
            console.log("播放器创建了。");

            /* You can register a click event with the custom DOM string to trigger an action, for example, to pop up a dialog box for VIP registration. */
            /*var vip_limit_btn = document.querySelector('.vip_limit_btn')
            vip_limit_btn.addEventListener('click', function () {
              confirm('确认开通会员吗?')
            })

            var close_btn = document.querySelector('.vip_limit_close_btn')
            close_btn.addEventListener('click', function () {
              /!* Call the closePreviewLayer method to close the dialog box *!/
              player.getComponent('PreviewVodComponent').closePreviewLayer()
            })*/
          }
        );
      },
      toPlayer(videoSourceId) {
        if (!videoSourceId) {
          this.$message.warning("当前课程下暂无视频")
          return false
        }
        //判断付费
        vod.isHavePermissions(videoSourceId).then(response => {
          console.log(response)
          if(response){
            this.$router.push({path: `/player/${this.sectionId}/${videoSourceId}`})
          }else{
            this.$message.warning("没有播放权限")
          }
        });
      },
      getSectionInfo() {
        course.getSectionInfo(this.vid).then(response => {
          this.teacher = response.teacher;
          this.sectionId = response.sectionId;
          this.fromCommentData.targetId = this.sectionId
          this.fromCommentData.teacherId = this.teacher.id
          if (response.videoList) {
            //注意： (item) => {}和function(item){} 方法体中this指向不同，
            //箭头函数没有this,this会指向箭头函数所在的作用域
            //第二个this指向于这个function
            this.section = response.videoList.find(item => item.id === this.sectionId)
          }
          this.videoList = response.videoList;
        })
      },
      getPlayAuth() {
        return vod.getPlayAuth(this.vid).then(response => {
          if(response?.code==='80005'){
            this.$message.warning("没有播放权限")
            setTimeout(this.$router.go(-1)
            ,1200)
          }else{
            this.playAuth = response
          }
        })
      }
    },
    /*async asyncData({params, error}) {

      let [resp1, resp2] = await Promise.all([
        course.getSectionInfo(params.vid),
        vod.getPlayAuth(params.vid),
      ])
      return {
        teacher: resp1.teacher,
        sectionId: resp1.sectionId,
        targetId: resp1.sectionId,
        videoList: resp1.videoList,
        playAuth: resp2
      }
      /!* return vod.getPlayAuth(params.vid).then(response => {
         console.log(params.vid)
         console.log(response);
         //   require('~/assets/js/aliplayer-min.js')
         //已经拿到playAuth
         return {
           playAuth: response,
           vid: params.vid
           // chapterList: response.data.data.chapterList
         }
       })*!/
    }*/
  }
</script>

<style scoped>

</style>
